<template>
  <div class="homeTopLeft">
    <!-- 异常数据部分 -->
    <div class="homeTopLeft-top">
      <div class="class-title-icon">
        <div class="title">异常数据</div>
      </div>
      <!--警告数据 表格内容 -->
      <div class="homeTable">
        <el-table :data="tableData1" height="320" :header-cell-style="{background: '#141F3B',color:'#23cefd',fontSize:'16px',fontWeight: '400'}">
          <el-table-column prop="createTime" label="告警时间" width="150" align="center"></el-table-column>
          <el-table-column prop="imei" label="IMEI" width="140" align="center"></el-table-column>
          <el-table-column prop="status" label="告警等级" width="86" align="center">
            <template slot-scope="scope">
              <div class="block"><img width="20px" :src="urlMap[scope.row.status]" /></div>
              <!-- <span :style="{color: colorMap[scope.row.status]}">{{scope.row.statusLv}}</span> -->
            </template>
          </el-table-column>
          <!-- <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="deviceCode" label="设备编号" show-overflow-tooltip align="center"> </el-table-column> -->
          <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="center"> </el-table-column>
        </el-table>
      </div>

    </div>

    <!-- 巡检数据 -->
    <div class="homeTopLeft-bottom">
      <div class="class-title-icon">
        <div class="title">巡检数据</div>
      </div>
      <!-- 巡检数据 表格内容 -->
      <div class="homeTable">
        <el-table :data="tableData2" height="130" :header-cell-style="{background: '#141F3B',color:'#23cefd',fontSize:'16px',fontWeight: '400'}">
          <el-table-column prop="createTime" label="巡检时间" width="100" align="center"></el-table-column>
          <el-table-column prop="imei" label="IMEI" width="140" align="center"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="center"> </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
 export default {
    props: ['historyData1', 'historyData2'],
    data() {
      return {
        colorMap:{
          0: '#259b24',
          1: '#0082f6',
          2: '#ffeb3b',
          3: '#e51c23',
          4: '#d16800'
        },
        urlMap:{
          0: require('../../assets/homewarn/level0.png'),
          1: require('../../assets/homewarn/level1.png'),
          2: require('../../assets/homewarn/level2.png'),
          3: require('../../assets/homewarn/level3.png'),
          4: require('../../assets/homewarn/level4.png')
        },
        tableData1: [],
        tableData2:[]
      }
    },
    watch:{
      historyData1:function(data1){
        // console.log("this.tableData1:", data1);
        if (data1){
          data1.map(v=>{
            let str = v.statusLv;
            let index = str.lastIndexOf("+")
            str = str.substring(0, index);
            v.statusLv = str;
          })
          this.tableData1 = data1;
        }
      },
      historyData2:function(data2){
        // console.log("data2:", data2);
        if (data2){
          this.tableData2 = data2;
        }
      }
    },
  }
</script>
<style scoped>
  @import url('../../assets/css/homeTable.css');
</style>
<style lang="scss" scoped>
  .homeTopLeft{
    width: 100%;
    height: 100%;
  }
  .homeTopLeft-top{
    width: 100%;
    height: 387px;
    background: url("../../assets/img/home-left-01.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
  }
  .homeTopLeft-bottom{
    width: 100%;
    height: 197px;
    background: url("../../assets/img/home-left-02.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }
</style>
